<template>
  <div class="login-container">
    <div class="login-box">
      <!-- 头像区 -->
      <div class="avatar-box">
        <img src="../../../static/image/20170604180151326296.png" alt="" style="width: 100px;height: 100px;"/>
      </div>
      <!-- 登录表单区 -->
      <div>
		  <el-form
		    ref="loginFormRef"
		    label-width="80px"
		    class="login-form"
		  >
		    <!-- 用户名 -->
		    <el-form-item label="邮箱" prop="email" >
		      <el-input
		        v-model="email"
		        prefix-icon="iconfont icon-user"
		      ></el-input>
		    </el-form-item>
		    <!-- 密码 -->
		    <el-form-item label="密码" prop="password" >
		      <el-input
		        type="password"
		        v-model="password"
		        prefix-icon="iconfont icon-3702mima"
		      ></el-input>
		    </el-form-item>
		    <!-- 按钮区 -->
		    <el-form-item class="btns">
		      <el-button type="primary" @click.enter="login" :disabled='formRight==true'>登录</el-button>
		      <!-- <el-button type="info" @click="resetLoginForm">重置</el-button> -->
		    </el-form-item>
		  </el-form>
	  </div>
    </div>
  </div>
</template>

<script>
export default {
  name: "Login",
  data() {
    return {
      email:'',
	  password:'',
	  // disabled:true,
    }
  },
  methods: {
    async login() {
     const params={
		 email:this.email,
		 password:this.password
	 }
	 await this.axios.post('https://api.shop.eduwork.cn/api/auth/login',params).then(res=>{
		 if(res.status==200){
			  this.$message({
			           showClose: true,
			           message: '登陆成功',
			           type: 'success'
			         })
			 sessionStorage.setItem('token',res.data.access_token)
			 this.$store.commit('Token',res.data.access_token)
			 setTimeout(()=>{
				 this.$router.replace('/home')
			 },2000)
		 }else{
			 
		 }
		
	 }).catch(err=>{
		 this.$message({
		          showClose: true,
		          message: '账号或者密码错误',
		          type: 'error'
		        })
	 })
    },
  },
  computed:{
	  formRight(){
		  return this.username=='' || this.password==''
	  }
  }
};
</script>

<style  scoped>
.login-container {
  height: 100%;
  background-color: #2b4b6b;
}
.login-box {
  display: flex;
  align-items: center;
  width: 450px;
  height: 300px;
  background-color: #fff;
  border: 1px dashed #2B4B6B;
  border-radius: 10px;
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  .avatar-box {
    width: 130px;
    height: 130px;
    background-color: #fff;
    border: 1px solid #eee;
    border-radius: 50%;
    padding: 30px;
    box-shadow: 0 0 10px #ddd;
    position: absolute;
    left: 50%;

    transform: translate(-50%, -50%);
    img {
      width: 100px;
      height: 100px;
      border-radius: 50%;
      background: #eee;
    }
  }
}
.btns {
  display: flex;
  justify-content: flex-end;
}
.login-form {
  /* position: absolute;
  bottom: 0;
  width: 100%;
  padding-right: 40px;
  box-sizing: border-box; */
}
</style>